<template>
  <div class="user-profile-page">
    <van-nav-bar
      left-arrow
      title="个人信息"
      @click-left="$router.back()"
    ></van-nav-bar>
    <van-cell-group>
      <van-uploader
        :before-read="beforeRead"
        :after-read="afterRead"
        style="width:100%"
      >
        <van-cell title="头像" center is-link>
          <van-image
            slot="default"
            fit="cover"
            round
            :src="userInfo.photo"
          ></van-image>
        </van-cell>
      </van-uploader>
      <van-cell title="昵称" :value="userInfo.name" @click="showEdit" />
      <van-cell title="简介" value="未填写" />
    </van-cell-group>
    <van-cell-group style="margin-top:12px">
      <van-cell
        @click="genderClick"
        is-link
        title="性别"
        :value="{ 0: '男', 1: '女', 2: '保密' }[userInfo.gender]"
      ></van-cell>
      <van-cell
        @click="birthdayClick"
        is-link
        title=" 生日"
        :value="userInfo.birthday | formatTime"
      ></van-cell>
    </van-cell-group>
    <div class="logout" @click="logout">
      <span>退出登录</span>
    </div>
    <van-action-sheet
      v-model="showGender"
      :actions="actions"
      cancel-text="取消"
      @canel="showGender = false"
      @select="genderSelect"
    >
    </van-action-sheet>
    <van-popup v-model="showDate" position="bottom">
      <van-datetime-picker
        v-model="currentTime"
        title="选择生日"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="showDate = false"
        @confirm="dateConfirm"
      ></van-datetime-picker>
    </van-popup>
    <Edit ref="edit" @editUserInfo="editUserInfo"> </Edit>
  </div>
</template>

<script>
import Edit from './components/edit.vue'
import { userProfilePath, userPhoto } from '@/api/user.js'
import { mapState, mapMutations } from 'vuex'
import dayjs from 'dayjs'
export default {
  components: {
    Edit
  },
  filters: {
    formatTime (tiem) {
      return dayjs(tiem).format('YYYY-MM-DD')
    }
  },
  data () {
    return {
      currentTime: new Date(),
      showDate: false,
      minDate: new Date('1950-01-01'),
      maxDate: new Date(),
      showGender: false,
      actions: [
        { name: '男', value: 0 },
        { name: '女', value: 1 }
      ]
    }
  },
  computed: {
    // ...mapMutations('user', ['setUserInfo']),
    ...mapState('user', ['userInfo'])
  },
  created () {
    this.$store.dispatch('user/getUserInfo')
  },
  methods: {
    ...mapMutations('user', ['setToken', 'setUserInfo']),
    // 退出登录
    logout () {
      this.$dialog
        .confirm({ title: '提示', message: '您确定退出该网站吗?' })
        .then(() => {
          // 将token值清空
          this.setToken('')
          // 跳转至首页
          this.$router.push('/')
          // 轻提示
          this.$toast.success('退出成功')
        })
        .catch(() => {})
    },
    // 封装修改个人资料的方法
    async editUserInfo (obj) {
      //
      await userProfilePath({
        [obj.key]: obj.value
      })
      // 调用vuex方法,改变userInfo值
      this.$store.commit('user/setUserOther', {
        key: obj.key,
        value: obj.value
      })
      // 成功提示
      this.$toast.success('修改成功')
    },
    // 选择性别
    async genderSelect (item) {
      // 获取点击后的值
      // 点击就隐藏页面
      this.showGender = false
      // 将获取到的值传入方法,修改vuex中的值
      this.editUserInfo({
        key: 'gender',
        value: item.value
      })
    },
    // 性别点击
    genderClick () {
      // 点击显示界面
      this.showGender = true
      // 根据已有封锁性别
      this.actions[this.userInfo.gender].disabled = true
      // 解封性别
      this.actions[1 - this.userInfo.gender].disabled = false
      // this.actions[this.userInfo.gender]=
    },
    // 生日点击
    birthdayClick () {
      // 显示姐界面
      this.showDate = true
      // 将初始值设置为自己的的生日
      this.currentTime = new Date(this.userInfo.birthday)
    },
    // 选择生日后点击确定
    async dateConfirm () {
      // 点击确定隐藏页面
      this.showDate = false
      // 隐藏方法
      this.editUserInfo({
        key: 'birthday',
        value: this.currentTime
      })
    },
    // 上传方法
    async afterRead (res) {
      const _formdata = new FormData()
      // 转化为FormDate格式
      _formdata.append('photo', res.file)
      // 请求
      const response = await userPhoto(_formdata)
      // 修改vuex
      this.$store.commit('user/setUserOther', {
        key: 'photo',
        value: response.data.photo
      })
      this.$toast.success('修改成功')
      console.log('res', res)
      console.log('response', response)
      console.log('_formdata', _formdata)
    },
    // 上传前限制
    beforeRead (file) {
      // 限制上传的文件类型
      const isImg = file.type === 'image/png' || file.type === 'image/jpeg'
      // 限制上传的文件大小
      const limit1m = file.size / 1024 / 1024 < 1
      // 类型不符弹窗
      if (!isImg) {
        this.$toast.fail('请上传png与jpeg图片格式')
      }
      // 大小不服弹窗
      if (!limit1m) {
        this.$toast.fail('请上传1M内图片')
      }
      // 两项都符合方可上传图片
      return isImg && limit1m
    },
    showEdit () {
      this.$refs.edit.showEdit = true
      this.$refs.edit.inputValue = this.userInfo.name
    }
  }
}
</script>

<style lang="less" scoped>
.user-profile-page {
  background: #f8f8f8;
  .van-image {
    display: block;
    float: right;
    width: 30px;
    height: 30px;
  }
  .van-cell__title {
    width: 50px;
    flex: none;
  }
}
.logout {
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 30px;
  width: 100%;
  color: @geek-color;
}
::v-deep .van-uploader__input-wrapper {
  width: 100%;
}
</style>
